<template>
  <div>
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div class="successBox">
      <div class="success">
        <van-icon name="checked" class="icon"/>
        <h1 class="successTxt">报名成功</h1>
      </div>
    </div>
    <!-- 提示信息 -->
    <div class="PromptInformation">
      <p class="zitida">提示：支付成功后请在相应的时间段内确认报名</p>
    </div>
    <!-- 查看报名 -->
    <div class="btn">
      <van-button type="info" class="pay" @click="CheckRegistration">查看我的报名</van-button>
    </div>
    <div class="successBox">
      <div class="success">
        <van-image width="30px" :src="err" class="icon"></van-image>
        <h1 class="successTxt errTxt">报名失败</h1>
      </div>
    </div>
    <!-- 提示信息 -->
    <div class="PromptInformation">
      <p>支付失败，请重试！</p>
    </div>
    <!-- 查看报名 -->
    <div class="btn">
      <van-button type="info" class="pay" @click="PayAgain">重新交费</van-button>
    </div>
  </div>
</template>

<script>
    import NavBar from '@/components/navBar.vue'

    export default {
        data() {
            return {
                // 标题  路由
                title: '支付',
                route: 'payment',
                err:require('../../assets/err.svg')
            }
        },
        methods: {
            CheckRegistration() {
                this.$router.push({path: '/MyApplication'})
            },
            PayAgain() {
                this.$router.push({path: '/PaymentMeneys'})
            }
        },
        components: {
            NavBar,
        },
    }
</script>

<style scoped>
  .successBox {
    margin-top: 35px;
  }

  .success h1 {
    margin-left: 40px;
    margin-top: -30px;
    color: rgb(89, 11, 235);
  }

  .PromptInformation {
    text-align: center;
    margin-top: 26px;
    color: rgba(128, 128, 128, 1);
    font-size: 14px;
  }
.zitida{
  font-size: 14px;
}
  .btn {
    margin: 0 auto;
    width: 80%;
  }

  .pay {
    width: 100%;
    border-radius: 4px;
    margin-top: 83px
  }
  .icon{
    margin-top: 20px;
    font-size: 30px;
    color: rgba(42, 130, 228, 1);
  }
  .successTxt{
    color: rgba(42, 130, 228, 1) !important;
    margin-top: -40px!important;
  }
  .errTxt{
    color: rgba(255, 87, 51, 1) !important;
    margin-top: -43px!important;
  }
 .van-image{
    margin-left: -130px;
  }
  .success{
    text-align: center;
  }
   .success i{
     margin-left: -130px;
   }
</style>
